<template>
  <div>
    <Input type="text" v-model="deptName" placeholder="请输入部门名称" />
    <div style="font-size: 14px;">
      <Tree :data="deptData" @on-select-change="checkChange" ></Tree>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      deptName: '',
      deptData: [],
      deptData1: [
        {
          deptName: "酷音盛世",
          sonDeptList: [
            {
              deptName: "销售部",
              sonDeptList: [
                {
                  deptName: "销售一部",
                  sonDeptList: [
                    {
                      deptName: "一组",
                      sonDeptList: [],
                      userCount: 2,
                      level: "0.1.2.3",
                      leadName: "无",
                      pid: 3,
                      id: 6,
                      leadId: ""
                    },
                    {
                      deptName: "二组",
                      sonDeptList: [],
                      userCount: 0,
                      level: "0.1.2.3",
                      leadName: "无",
                      pid: 3,
                      id: 7,
                      leadId: ""
                    }
                  ],
                  userCount: 3,
                  level: "0.1.2",
                  leadName: "ggg",
                  pid: 2,
                  id: 3,
                  leadId: "bfc45b32e40c48fa8cf1456e3a59719a"
                },
                {
                  deptName: "销售二部",
                  sonDeptList: [
                    {
                      deptName: "啥啊",
                      sonDeptList: [],
                      userCount: 0,
                      level: "0.1.2.4",
                      leadName: "无",
                      pid: 4,
                      id: 8,
                      leadId: ""
                    },
                    {
                      deptName: "滚蛋啊",
                      sonDeptList: [],
                      userCount: 0,
                      level: "0.1.2.4",
                      leadName: "无",
                      pid: 4,
                      id: 9,
                      leadId: ""
                    }
                  ],
                  userCount: 0,
                  level: "0.1.2",
                  leadName: "无",
                  pid: 2,
                  id: 4,
                  leadId: ""
                },
                {
                  deptName: "销售三部",
                  sonDeptList: [],
                  userCount: 0,
                  level: "0.1.2",
                  leadName: "无",
                  pid: 2,
                  id: 5,
                  leadId: ""
                }
              ],
              userCount: 4,
              level: "0.1",
              leadName: "老金",
              pid: 1,
              id: 2,
              leadId: "4a191ee2af0241eaa14dd889bc773913"
            }
          ],
          userCount: 5,
          level: "0",
          leadName: "无",
          pid: 0,
          id: 1,
          leadId: ""
        }
      ]
    };
  },
  methods: {
    checkChange(n, m) {
      console.log(n, m)
    },
    renderContent(h, {root, node, data}) {
      return h('span', {
        style: {
        }
      }, [
        h('span', {
          style: {
            display: 'inline-block',
            fontSize: '14px'
          }
        }, data.title),
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
          }
        }, [
          h('Button', {
            props: {
              type: 'default',
              size: 'small'
            }
          }, '选择')
        ])
      ])
    }
  },
  mounted() {
    console.log(formatTree(this.deptData1));
    this.deptData = formatTree(this.deptData1);
  }
};
function formatTree(subdata) {
  let arr = [];
  subdata.forEach((item, index) => {
    let subarr = {};
    subarr = {
      title: item.deptName,
      id: item.id,
      userCount: item.userCount,
      pid: item.pid,
      level: item.level,
      leadName: item.leadName,
      leadId: item.leadId,
      expand: true
    };

    if (item.sonDeptList.length > 0) {
      subarr.children = formatTree(item.sonDeptList);
    }

    arr.push(subarr);
  });

  return arr;
}
</script>

<style scoped>
.ivu-tree >>> .ivu-tree-title {
  font-size: 14px;
}
</style>